<template>
  <div class="citychoice" ref="cityBox">
    <section>
      <h2 class="title border-bottom">当前城市</h2>
      <div class="border-bottom">
        <div class="current border-bottom">
          <span class="currentcity">{{ this.$store.state.cruCity }}</span>
        </div>
      </div>
      <h2 class="title border-bottom">热门城市</h2>
      <div class="hotcitylist border-bottom">
        <div class="current">
          <span class="hotcity" v-for="item in lists" :key="item.id" @click="handleCity(item.name)">{{ item.name }}</span>
        </div>
      </div>
      <div>
        <div class="allcity" v-for="(item,index) of list" :key="index">
          <h2 class="citytitle" :ref="index">{{ index }}</h2>
          <div class="city border-bottom" v-for="items in item" :key="items.id">
            <div @click="handleCity(items.name)">{{ items.name }}</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'Allcity',
  props: {
    list: Object,
    lists: Array,
    leet: String
  },
  methods: {
    handleCity (city) {
      this.$router.push('/')
      this.$store.dispatch('selectCity', city)
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.cityBox)
  },
  watch: {
    leet () {
      this.scroll.scrollToElement(this.$refs[this.leet][0], 300)
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
    @import '~@/assets/css/variable.styl'
.citychoice
 background-color #EEEEEE
 position absolute
 top 1.6rem
 left 0rem
 right 0rem
 bottom 0rem
 overflow hidden
.title
 font-size: .24rem
 padding: .2rem .3rem
.current
 background-color #fff
 width 100%
 padding 0.2rem 0.3rem 0rem 0.3rem
.currentcity
 display inline-block
 width 2rem
 height 0.6rem
 line-height 0.6rem
 border #CACACA 0.02rem solid
 text-align center
 border-radius 0.08rem
 margin-bottom 0.2rem
.hotcity
 display inline-block
 width 2rem
 height 0.6rem
 line-height 0.6rem
 border #CACACA 0.02rem solid
 text-align center
 margin-bottom 0.2rem
 margin-right 0.2rem
 border-radius 0.08rem
.allcity
 background-color #FFFFFF
 z-index -1
.citytitle
 font-size: .24rem
 padding: .2rem .3rem
 background-color #EEEEEE
.city
 font-size: .24rem
 padding: .3rem .3rem
</style>
